{% extends "base/base.html" %}

{% block title %}合作商谈列表 - 项目合作归属数据管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-chat-dots"></i> 合作商谈列表</h2>
        <p class="text-muted">管理所有线上线下商谈记录，支持批量上传和数据导出</p>
    </div>
</div>

<!-- 搜索表单 -->
<div class="search-form">
    <form method="GET" class="row g-3">
        <div class="col-md-2">
            <label class="form-label">项目负责人</label>
            <select class="form-select" name="search_staff">
                <option value="">全部负责人</option>
                {% for staff in staff_names %}
                <option value="{{ staff }}" {% if search_staff == staff %}selected{% endif %}>{{ staff }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">客户姓名</label>
            <select class="form-select" name="search_customer">
                <option value="">全部客户</option>
                {% for customer in customer_names %}
                <option value="{{ customer }}" {% if search_customer == customer %}selected{% endif %}>{{ customer }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">商谈类别</label>
            <select class="form-select" name="search_category">
                <option value="">全部类别</option>
                <option value="线上合作商谈" {% if search_category == '线上合作商谈' %}selected{% endif %}>线上合作商谈</option>
                <option value="线下合作商谈" {% if search_category == '线下合作商谈' %}selected{% endif %}>线下合作商谈</option>
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">开始日期</label>
            <input type="date" class="form-control" name="search_start_date" value="{{ search_start_date }}">
        </div>
        <div class="col-md-2">
            <label class="form-label">结束日期</label>
            <input type="date" class="form-control" name="search_end_date" value="{{ search_end_date }}">
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <button type="submit" class="btn btn-primary me-2">
                <i class="bi bi-search"></i> 搜索
            </button>
            <a href="{{ url_for('negotiation.negotiation_list') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-clockwise"></i> 重置
            </a>
        </div>
    </form>
</div>

<!-- 操作工具栏 -->
<div class="row mb-3">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addNegotiationModal">
                    <i class="bi bi-plus-circle"></i> 添加商谈记录
                </button>
                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#uploadModal">
                    <i class="bi bi-cloud-upload"></i> 批量上传
                </button>
                <button type="button" class="btn btn-danger batch-operation-btn" onclick="batchDelete()" disabled>
                    <i class="bi bi-trash"></i> 批量删除
                </button>
            </div>
            <div>
                <a href="#" class="btn btn-outline-primary" onclick="exportNegotiations()">
                    <i class="bi bi-download"></i> 导出数据
                </a>
                <a href="{{ url_for('negotiation.download_template') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-file-earmark-excel"></i> 下载模板
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 商谈记录列表 -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 data-table">
                <thead>
                    <tr>
                        <th width="40">
                            <input type="checkbox" class="form-check-input" onchange="toggleSelectAll(this)">
                        </th>
                        <th>客户姓名</th>
                        <th>项目序号</th>
                        <th>商谈类别</th>
                        <th>项目负责人</th>
                        <th>所属项目</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>总时长</th>
                        <th>跨项目</th>
                        <th width="150">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for negotiation in negotiations.items %}
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input" name="selected_items" value="{{ negotiation.id }}" onchange="updateBatchButtons()">
                        </td>
                        <td>{{ negotiation.customer_name }}</td>
                        <td>{{ negotiation.project_number or '-' }}</td>
                        <td>
                            {% if negotiation.category == '线上合作商谈' %}
                                <span class="badge bg-info">线上</span>
                            {% else %}
                                <span class="badge bg-warning">线下</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if negotiation.staff_names %}
                                {{ negotiation.staff_names }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ negotiation.project_name or '-' }}</td>
                        <td>{{ negotiation.start_time.strftime('%Y-%m-%d %H:%M') if negotiation.start_time else '-' }}</td>
                        <td>{{ negotiation.end_time.strftime('%Y-%m-%d %H:%M') if negotiation.end_time else '-' }}</td>
                        <td>
                            {% if negotiation.duration_minutes %}
                                {{ (negotiation.duration_minutes // 60) }}小时{{ (negotiation.duration_minutes % 60) }}分钟
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>
                            {% if negotiation.is_cross_project %}
                                <span class="badge bg-secondary">是</span>
                            {% else %}
                                <span class="badge bg-success">否</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" 
                                        onclick="editNegotiation({{ negotiation.id }})" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#editNegotiationModal">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" 
                                        onclick="deleteNegotiation({{ negotiation.id }})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 分页 -->
{% if negotiations.pages > 1 %}
<nav class="mt-4">
    <ul class="pagination justify-content-center">
        {% if negotiations.has_prev %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('negotiation.negotiation_list', page=negotiations.prev_num, search_staff=search_staff, search_customer=search_customer, search_category=search_category, search_start_date=search_start_date, search_end_date=search_end_date) }}">上一页</a>
        </li>
        {% endif %}
        
        {% for page_num in negotiations.iter_pages() %}
            {% if page_num %}
                {% if page_num != negotiations.page %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('negotiation.negotiation_list', page=page_num, search_staff=search_staff, search_customer=search_customer, search_category=search_category, search_start_date=search_start_date, search_end_date=search_end_date) }}">{{ page_num }}</a>
                </li>
                {% else %}
                <li class="page-item active">
                    <span class="page-link">{{ page_num }}</span>
                </li>
                {% endif %}
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">…</span>
                </li>
            {% endif %}
        {% endfor %}
        
        {% if negotiations.has_next %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('negotiation.negotiation_list', page=negotiations.next_num, search_staff=search_staff, search_customer=search_customer, search_category=search_category, search_start_date=search_start_date, search_end_date=search_end_date) }}">下一页</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

<!-- 添加商谈记录模态框 -->
<div class="modal fade" id="addNegotiationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加商谈记录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="#" data-validate="true">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">客户姓名 <span class="text-danger">*</span></label>
                            <select class="form-select" name="customer_name" required>
                                <option value="">请选择客户</option>
                                {% for customer in customer_names %}
                                <option value="{{ customer }}">{{ customer }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">项目序号</label>
                            <select class="form-select" name="project_number">
                                <option value="">请选择项目序号</option>
                                {% for project in project_numbers %}
                                <option value="{{ project }}">{{ project }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">商谈类别 <span class="text-danger">*</span></label>
                            <select class="form-select" name="category" required>
                                <option value="">请选择商谈类别</option>
                                <option value="线上合作商谈">线上合作商谈</option>
                                <option value="线下合作商谈">线下合作商谈</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">项目负责人 <span class="text-danger">*</span></label>
                            <select class="form-select" name="staff_names" required multiple>
                                {% for staff in staff_names %}
                                <option value="{{ staff }}">{{ staff }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">可选择多个负责人（按住Ctrl键多选）</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">开始时间 <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control" name="start_time" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">结束时间 <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control" name="end_time" required>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_cross_project">
                                <label class="form-check-label">
                                    跨项目合作
                                </label>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">备注信息</label>
                            <textarea class="form-control" name="notes" rows="3" placeholder="请输入备注信息（可选）"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-success">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 批量上传模态框 -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量上传商谈数据</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('negotiation.upload_negotiations') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">选择Excel文件</label>
                        <input type="file" class="form-control" name="upload_file" accept=".xlsx,.xls" required>
                        <div class="form-text">支持.xlsx和.xls格式，请按照模板格式准备数据</div>
                    </div>
                    <div class="alert alert-info">
                        <h6>模板包含字段：</h6>
                        <ul class="mb-0">
                            <li>所属项目</li>
                            <li>类别（线上合作商谈/线下合作商谈）</li>
                            <li>客户姓名</li>
                            <li>项目序号</li>
                            <li>项目负责人（多个用逗号分隔）</li>
                            <li>开始商谈时间（格式：2025/02/22 10:16:32）</li>
                            <li>结束商谈时间（格式：2025/02/22 12:16:32）</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">上传</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 编辑商谈记录
function editNegotiation(negotiationId) {
    // 这里应该通过AJAX获取详细数据
    console.log('编辑商谈记录:', negotiationId);
}

// 删除商谈记录
function deleteNegotiation(negotiationId) {
    if (confirm('确定要删除这条商谈记录吗？此操作不可撤销。')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/delete_negotiation/${negotiationId}`;
        document.body.appendChild(form);
        form.submit();
    }
}

// 批量删除
function batchDelete() {
    const selected = document.querySelectorAll('input[name="selected_items"]:checked');
    if (selected.length === 0) {
        alert('请选择要删除的记录');
        return;
    }
    
    if (confirm(`确定要删除选中的 ${selected.length} 条记录吗？此操作不可撤销。`)) {
        selected.forEach(checkbox => {
            deleteNegotiation(checkbox.value);
        });
    }
}

// 导出数据
function exportNegotiations() {
    window.location.href = '/export_negotiations';
}
</script>
{% endblock %}
